<template>
    <div>
        <template v-if="!form.categoryId">
            <el-alert title="未设置商品分类" type="warning" show-icon :closable="false">
            </el-alert>
        </template>
        <template v-else>
            <el-row v-for="(item, key) in specList" :key="key" style="margin-bottom: 20px;">
                <el-col :span="2">
                    {{item.name}}
                </el-col>
                <el-col :span="22">
                    <!-- 动态分组，动态创建data属性数据 -->
                    <el-checkbox-group v-model="checkedModel['ChceckGroup-'+item.id]" @change="handleCheckedSpecChange">
                        <el-checkbox :label="key+`[:]`+val.id+`[:]`+val.specValue" v-for="(val, index) in item.values" :key="index" style="margin-left: 0;margin-right: 20px;">
                            {{val.specValue}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-table :data="checkSkuList" :span-method="objectSpanMethod" border>
                        <el-table-column label="规格" align="center">
                            <template slot-scope="scope"> {{ scope.row.specAttrName }} </template>
                        </el-table-column>
                        <el-table-column label="规格值" align="center">
                            <template slot-scope="scope"> {{ scope.row.specValue }} </template>
                        </el-table-column>
                        <el-table-column label="价格" align="center">
                            <template slot-scope="scope">
                                <el-input-number style="width: 100%;" v-model="scope.row.price" controls-position="right" :min="0"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" align="center">
                            <template slot-scope="scope">
                                <el-input-number style="width: 100%;" v-model="scope.row.total" controls-position="right" :min="0"></el-input-number>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </template>
    </div>
</template>

<script>
    export default {
        name: "SkuSpec",
        props: {
            form: {
                
            }
        },
        data() {
            return {
                specList: [],   //根据商品分类加载规格和规格值
                checkSkuList: [],   //选中的规格和值
            };
        },
        methods: {
            handleCheckedSpecChange(value) {
                let res = []
                for(let key of Object.keys(this.checkedModel)) {
                    if(this.checkedModel[key].length > 0) {
                        let ii = 0;
                        for(let spec of this.checkedModel[key]) {
                            //规格ID
                            const specAttrId = key.split('-')[1]
                            //['规格索引', '规格值ID', '规格值']
                            const checkedValArr = spec.split('[:]')
                            
                            //规格名称
                            let specAttrName = this.specList[checkedValArr[0]].name
                            let specValueId = checkedValArr[1]
                            let specValue = checkedValArr[2]

                            res.push({
                                specAttrId,
                                specAttrName,
                                specValueId,
                                specValue,
                                price: 0,
                                total: 0
                            })
                            ii++
                        }
                    }
                }
                this.checkSkuList = res
                //console.log(this.checkSkuList);
                
                //计算合并行数
                this.getSpanArr(this.checkSkuList)
            },
            getSpanArr(data) {  //因为要合并的行数是不固定的，此函数是实现合并随意行数的功能
                this.spanArr = []
                for (var i = 0; i < data.length; i++) {
                    if (i === 0) {
                        // 如果是第一条记录（即索引是0的时候），向数组中加入１
                        this.spanArr.push(1)
                        this.pos = 0
                    } else {
                        if (data[i].specAttrId === data[i - 1].specAttrId) {
                            // 如果specAttrId相等就累加，并且push 0
                            this.spanArr[this.pos] += 1
                            this.spanArr.push(0)
                        } else {
                            // 不相等push 1
                            this.spanArr.push(1)
                            this.pos = i
                        }
                    }
                }
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) { //合并行数
                if (columnIndex === 0) {
                    const _row = this.spanArr[rowIndex]
                    const _col = _row > 0 ? 1 : 0
                    return {
                        rowspan: _row,
                        colspan: _col
                    }
                }
            },
        }
    };
</script>

<style scoped>
</style>